<template>
  <div class="box">
    <div class="main-box">
      <div class="main-top">用户评价：</div>
      <hr />
      <div v-for="item in evaluations" :key="item.id" class="item-box">
        <div class="img-box clear">
          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png"
            width="40px"
            height="40px"
          />
          <div>{{ item.choiceEvaluation || "用户" }}</div>
          <div class="date-box">{{ item.evaluateTime }}</div>
        </div>
        <div class="item-main">
          <van-rate
            v-model="item.allStar"
            :size="25"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            allow-half
          />
          <div
            v-for="(itemC, indexC) in item.copyWriting"
            :key="indexC"
            class="text"
          >
            {{ itemC }}
          </div>
          <div class="text">评价：{{ item.remark }}</div>
        </div>
      </div>

      <div class="foot-box">没有更多 ...</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      evaluations: [],
    };
  },
  created() {
    // console.log(this.$store.state.userStore.user.name);
    this.$http({
      url: "/driver/getCommentsList",
      method: "POST",
      params: {
        name: this.$store.state.userStore.user.name,
      },
    }).then((res) => {
      // console.log(res.data);
      if (res.data.code == 1) {
        this.evaluations = res.data.data;
        // console.log(res.data.data);
      }
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  margin-top: 20px;
  background-color: #ccc;

  .main-top {
    padding-left: 10px;
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
  }

  .item-box {
    padding: 10px;
    min-height: 60px;
    line-height: 30px;
    margin-bottom: 10px;
    background-color: #fff;

    .img-box {
      height: 40px;
      line-height: 40px;

      div,
      img {
        float: left;
        padding-right: 10px;
      }
      .date-box {
        float: right;
      }
    }

    .item-main {
      padding-left: 20px;

      .text {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
      }
    }
  }
  .foot-box {
    text-align: center;
    background-color: #fff;
  }
}
</style>